<template>

    <el-drawer :close-on-click-modal="false" class="hm-drawer" size="40%" direction="rtl" v-model="show" :before-close="handleClose">
        <template #header>
            <div class="hm-box-title">查看合同</div>
        </template>
        <el-row>
            <el-col :span="24">
                <p class="title">供应商信息</p>
            </el-col>
            <el-col :span="12">
                <p class="label">供应商名:</p>
                <p class="value">{{ contractDetailsData.supplierName }}</p>
            </el-col>
            <el-col :span="12">
                <p class="label">供应商类型:</p>
                <p class="value">{{ contractDetailsData.supplierType }}</p>
            </el-col>
            <el-col :span="12">
                <p class="label">招商部:</p>
                <p class="value">{{ contractDetailsData.recruiterDept }}</p>
            </el-col>
            <el-col :span="12">
                <p class="label">招商员:</p>
                <p class="value">{{ contractDetailsData.recruiter }}</p>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <p class="title">供货合同</p>
            </el-col>
            <el-col :span="12">
                <p class="label">签订日期:</p>
                <p class="value">{{ contractDetailsData.contractSellUpdateTime }}</p>
            </el-col>
            <el-col :span="12">
                <p class="label">上传人:</p>
                <p class="value">{{ contractDetailsData.contractSellUpdateBy }}</p>
            </el-col>
            <el-col :span="12">
                <p class="label">对接人:</p>
                <p class="value">{{ contractDetailsData.counterpart }}</p>
            </el-col>
            <div style="display: flex;">
                <el-col :span="12">
                    <p class="label">{{ '' }}</p>
                    <p class="value">{{ contractDetailsData.contractSellName }}</p>
                </el-col>
                <el-col :span="12" style="display: flex;justify-content: space-between;padding: 0 15%;">
                    <p class="buttom">预览</p>
                    <p class="buttom">下载</p>
                </el-col>
            </div>
        </el-row>
        <el-row>
            <el-col :span="24">
                <p class="title">破价合同</p>
            </el-col>
            <div v-for="(item, index) in contractDetailsData.contractDiscountName.split(',')" :key="index" style="display: flex;flex-wrap: wrap;margin-bottom: 10px;">
                <el-col :span="12" style="display: flex;">
                    <p class="label">签订日期:</p>
                    <p class="value">{{ contractDetailsData.contractSellUpdateTime }}</p>
                </el-col>
                <el-col :span="12" style="display: flex;">
                    <p class="label">上传人:</p>
                    <p class="value">{{ contractDetailsData.contractSellUpdateBy }}</p>
                </el-col>
                <el-col :span="12">
                    <p class="label">对接人:</p>
                    <p class="value">{{ contractDetailsData.counterpart }}</p>
                </el-col>
                <el-col :span="12">
                    <p class="label">破价商品:</p>
                    <p class="value">{{ contractDetailsData.contractDiscountNames }}</p>
                </el-col>
                <el-col :span="24" style="display: flex;">
                    <el-col :span="12">
                        <p class="label">{{ }}</p>
                        <p class="value">{{ item }}</p>
                    </el-col>
                    <el-col :span="12"  style="display: flex;justify-content: space-between;padding: 0 15%;">
                        <p class="buttom">预览</p>
                        <p class="buttom">下载</p>
                    </el-col>
                </el-col>
            </div>
        </el-row>
    </el-drawer>
</template>
<script setup name="ContractDetails" lang="ts">
const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const props = defineProps({
    contractDetailsVisible: {
        type: Boolean,
        default: false
    },
    contractDetailsData: {
        type: Object,
        default: false
    }
});

const show = computed(() => props.contractDetailsVisible);
const emits = defineEmits(['doClose'])
const handleClose = () => {
    emits('doClose')
}

</script>
<style lang="scss" scoped>
.title {
    font-weight: bold;
}

.label {
    width: 100px;
    text-align: right;
}
.buttom{
    color: #409EFF;
}
</style>